<template>
  <div class="hello">
    <v-nav :current="'2'" :langType="lang" :lang="lang" @EnData="EnData" @ChData="ChData" :isEnShow="isEnShow" :isChShow="isChShow"></v-nav>
    <div class="banner-s">
      <img src="@/assets/banner2.jpg" alt="" style="width: 100%;border: 0">
      <!-- <p>获取企业最新动态，了解行业发展趋势，探寻企业经营理念</p> -->
    </div>
    <div style="background-color: #f5f5f5">
      <div class="daohang">
      <span @click="toList(1)">{{footList.aboutList[0]}}  ></span>  <span @click="toList(2)">{{footList.aboutList[2]}}  ></span>  <span style="color: #2154b9;font-weight:bolder;cursor: auto">{{productIntroduce[13]}}</span>
      </div>
    </div>
    <div class="main-out">
      <div class="main p-content">
        <div>
          <h1>{{listData.post_title}}</h1>
          <!-- <div class="img-div">
            <img src="@/assets/det.png" alt="">
          </div> -->
          <div class="brief" v-html="listData.post_content"></div>
        </div>
      </div>
    </div>
    <vFooter></vFooter>
  </div>
</template>

<script>
import vNav from '@/components/nav.vue'
import vFooter from '@/components/footer.vue'
import {mapGetters} from 'vuex'
import { getInfoData } from '@/services/api.js'
import { getInfoDataEn } from '@/services/api_en.js'
export default {
  name: 'newsDetails',
  data () {
    return {
      activeName: 'second',
      id: null,
      listData: []
    }
  },
  computed: {
    ...mapGetters({
      'lang': 'lang',
      'productIntroduce': 'productIntroduce',
      'footList': 'footList'
    })
  },
  components: {
    vNav,
    vFooter
  },
  methods: {
    _getChList () {
      let params = {
        id: this.id
      }
      getInfoData(params).then((res) => {
        console.log(res)
        this.listData = res
      })
    },
    _getEnList () {
      let params = {
        id: this.id
      }
      getInfoDataEn(params).then((res) => {
        console.log(res)
        this.listData = res
      })
    },
    version () {
      if (this.lang === 1) {
        this._getChList()
        this.isEnShow = false
        this.isChShow = true
      }
      if (this.lang === 2) {
        this._getEnList()
        this.isEnShow = true
        this.isChShow = false
      }
    },
    EnData (res) {
      console.log('英文11')
      this._getEnList()
    },
    ChData (res) {
      console.log('中文')
      this._getChList()
    },
    toList (type) {
      if (type === 1) {
        this.$router.push('/jianjie')
      }
      if (type === 2) {
        this.$router.push('/chanye')
      }
    }
  },
  created () {
    this.id = this.$route.params.id
    this.version()
    window.scrollTo(0, 0)
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .foot {
    margin-top: 0
  }
  .main-out {
    background-color: #f5f5f5;
    padding-top: 12px;
    padding-bottom: 53px;
    .main {
      // height: 1074px;
      padding-bottom: 20px;
      background-color: #fff;
      h1 {
        font-size: 24px;
        letter-spacing: 2px;
        color: #333333;
        text-align: center;
        padding-top: 37px;
        padding-bottom: 20px
      }
      span {
        font-size: 14px;
        letter-spacing: 1px;
        color: #666666;
        display: block;
        text-align: center
      }
      .img-div {
        width: 1000px;
        height: 440px;
        margin: 0 auto;
        margin-top: 43px;
        margin-bottom: 38px;
        img {
          width: 100%;
          height: 100%
        }
      }
      .brief {
        width: 1000px;
        margin: 0 auto;
        p {
          font-size: 16px;
          letter-spacing: 1px;
          color: #666;
          text-indent: 30px;
          line-height: 30px;
        }
      }
      .page {
        width: 1000px;
        margin: 0 auto;
        margin-top: 52px;
        display: flex;
        p {
          display: flex;
          justify-content: center;
          width: 50%;
          font-size: 16px;
          letter-spacing: 1px;
          span {
            color: #333;
          }
          span:nth-child(2):hover {
            color: #2154b9;
            cursor: pointer
          }
        }
      }
    }
  }
  .daohang {
    width: 1200px;
    margin: 0 auto;
    border-bottom: 1px solid #ccc;
    font-size: 14px;
    background-color: #f5f5f5;
    padding: 20px 0;
    span {
      color: #666
    }
  }
  .daohang span:hover {
    color: #2154b9;
    cursor: pointer;
  }
</style>
